<template>
  <div class="page-one-port">
    <!-- 顶部分类  改成按照公司分类 -->
    <Tab :currentType="currentType" :onChangeTab="onChangeTab" :onRefresh="onRefresh"></Tab>
    <!-- <div class="port-name AlibabaPuHuiTi" @dblclick="onRefresh">{{ port.name }}</div> -->
    <div class="port-work-scroll">
      <PageScroll ref="pageScroll" :data="port.data" :page="port.page" @pullingUp="onPullingUp"
        @pullingDown="onPullingDown" @inited="onInited">
        <ul class="port-work-list">
          <li class="port-work-item" v-for="(work, index) in port.data" :key="index">
            <WorkItem :work="work"> </WorkItem>
          </li>
        </ul>
      </PageScroll>
    </div>
  </div>
</template>

<script>
import PageScroll from './components/PageScroll';
import WorkItem from './components/WorkItem.vue';
import Tab from './components/Tab';
const PAGE_SIZE = 20;
export default {
  components: {
    PageScroll,
    WorkItem,
    Tab,
  },
  data() {
    return {
      currentType: '',
      port: {
        name: '',
        data: [],
      },
    };
  },
  created() {
    const { port } = this.$route.query;
    if (port) {
      this.port.name = port;
    }
  },
  mounted() { },
  methods: {
    onChangeTab(val) {
      const scroll = this.$refs.pageScroll;
      this.currentType = val;
      if (scroll) {
        this.port.data = [];
        scroll.autoPullDownRefresh();
      }
    },
    onRefresh(port, index) {
      const scroll = this.$refs.pageScroll;
      if (scroll) {
        port.data = [];
        scroll.autoPullDownRefresh();
      }
    },
    onInited(scroll) {
      scroll.autoPullDownRefresh();
    },
    // 下拉刷新
    onPullingDown(scroll) {
      this.fetchData(scroll);
    },
    // 上拉加载
    onPullingUp(scroll) {
      this.fetchData(scroll);
    },
    fetchData(scroll) {
      let cur = scroll.page.current;
      const params = {
        pageNum: scroll.page.current,
        pageSize: PAGE_SIZE,
        portName: this.port.name,
        category: this.currentType,
      };

      this.getAxios(this.$queryQingdaoPortData, params).then((res) => {
        if (res.code == 0) {
          scroll.setTotalPage(res.page.totalPage);
          let list = res.page.list;
          if (cur == 1) {
            this.port.data = list;
          } else {
            this.port.data = this.port.data.concat(list);
          }
        }
      }).finally(() => {
        if (cur == 1) {
          scroll.finishPullDown();
        } else {
          scroll.finishPullUp();
        }
        this.$nextTick(() => {
          scroll.refresh();
        });
      }).catch(() => { });
    },
  },
};
</script>

<style lang="less" scoped>
.page-one-port {
  width: 100%;
  height: 100%;
  // padding: 0 14px;
  padding: 0px;
  overflow: hidden;
  user-select: none;

  .port-name {
    width: 100%;
    height: 61px;
    background: url(~@/assets/svg/port-name-bg-lg.svg) center no-repeat;
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 61px;
    letter-spacing: 8px;
  }

  .port-work-scroll {
    width: 100%;
    // height: calc(100% - 85px);
    // overflow: hidden;
    // margin-top: 24px;
    overflow-y: auto;
    height: calc(100vh - 196px);

    .port-work-list {
      padding: 0px;
      display: flex;
      flex-wrap: wrap;

      .port-work-item {
        width: 25%;
        padding: 0 16px;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
